<template>
  <div class="app-container">
    <h2>4.2.4&nbsp;建筑材料的选用</h2>
    <el-card v-for="(item,index) in items" :key="item.id" class="evaluation-item" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="number">{{ index +1 }}.&nbsp;{{ item.title }}</span>
        <div class="options">
          <evaluationStd :_aspect="item.title" :_evaluatioon_index="item.evaluation_index" class="evaluation" />

          <lock :_locked="score[index].locked" :-pop-over-show="false" class="lock" @click.native="handleLock(index)" />
        </div>
      </div>
      <el-card class="children-question" shadow="never">
        <div slot="header" class="children-header">
          <div>{{ item.aspect }}.（{{ item.max_score }}分）</div>
        </div>
        <el-form ref="form" :model="item" label-width="100px">
          <el-form-item v-if="item.id==1 ||item.id==4||item.id==5" label="是否满足">
            <el-radio-group v-model="score[index].satisfy">
              <el-radio
                :label="true"
                :disabled="score[index].locked"
                @change="addScore(index, true)"
              >是</el-radio>
              <el-radio
                :label="false"
                :disabled="score[index].locked"
                @change="addScore(index,false)"
              >否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-else-if="item.id==2" label>
            <el-radio-group v-model="score[index].score_index">
              <el-radio :label="0" :disabled="score[index].locked">住宅建筑土建与装修一体化设计的户数比例达到30%</el-radio></br></br>
              <el-radio :label="1" :disabled="score[index].locked">住宅建筑土建与装修一体化设计的户数比例达到100%</el-radio></br></br>
              <el-radio :label="2" :disabled="score[index].locked">公共建筑公共部位土建与装修一体化设计</el-radio></br></br>
              <el-radio :label="3" :disabled="score[index].locked">所有部位均土建与装修一体化设计</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-else-if="item.id==3" label>
            <el-checkbox-group v-model="score[index].checkboxlist">
              <el-checkbox :label="0" :disabled="score[index].locked">采用耐久性好、易维护的外立面材料</el-checkbox>
              <el-checkbox :label="1" :disabled="score[index].locked">采用耐久性好、易维护的室内装饰装修材料</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="!score[index].satisfy&&item.id === 1" label="不满足简述">
            <el-input v-model="score[index].description" label="不满足简述" type="textarea" />
          </el-form-item>
          <!-- <el-form-item v-if="!score[index].satisfy&&item.id==1" label="不满足简述"> -->
          <!-- <el-input v-model="score[index].description" label="不满足简述" type="textarea" /> -->
          <!-- </el-form-item> -->
        </el-form>
      </el-card>
      <!-- <div class="socre">
        <div class="score-title">得分&nbsp;&nbsp;</div>
        <div class="sum-score">{{item.score}}&nbsp;分</div>
      </div>-->
    </el-card>
    <div id="choose">
      <router-link to="/usage/evaluate/drainage">
        <el-button type="primary" icon="el-icon-arrow-left">上一项</el-button>
      </router-link>

      <router-link to="/usage/evaluate/recycle">
        <el-button type="primary" style="margin-left:20px">
          下一项
          <i class="el-icon-arrow-right el-icon--right" />
        </el-button>
      </router-link>
    </div>
  </div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import Lock from "@/components/Lock";
	import EvaluationStd from "@/components/EvaluationStd";

	export default {
		name: "MaterialSelect",
		components: {
			Lock,
			EvaluationStd
		},
		data() {
			return {
				items: [
          {
				  id: 1,
				  title: "",
				  aspect: "对地基基础、结构体系、结构构件进行优化设计，达到节材效果",
				  max_score: 3,
				  evaluation_index: "",
				},
				{
				  id: 2,
				  title: "",
				  aspect: "土建工程与装修工程一体化设计",
				  max_score: 3,
				  evaluation_index: "",
				  score_index:-1
				},
				{
				  id: 3,
				  title: "",
				  aspect: "合理采用耐久性好、易维护的装饰装修建筑材料",
				  max_score: 4,
				  evaluation_index: "",
				},
        {
          id: 4,
          title: "基本项1",
          aspect: "不得采用国家和地方禁止和限制使用的建筑材料及制品（不满足本项总分扣5分）",
          max_score: 5,
          evaluation_index: "",
        },
        {
          id: 5,
          title: "基本项2",
          aspect: "建筑造型要素应简约，且无大量装饰性构件（不满足本项总分扣5分）",
          max_score: 5,
          evaluation_index: "",
        }],
				score: []
			}
		},
		computed: {
			...mapGetters({
				usageScore: "usage",
				eId: "eId"
			})
		},
		created() {
			// console.log("usageScore",this.usageScore)
			this.$store.dispatch("project/getHistory", this.eId);
			this.score = this.usageScore._4_2_4;
			if (this.score.length === 0) {
				console.log("我等于-0")
				this.score = [{
								satisfy: null,
								description: '',
								locked: false,
								score: -1,
                checkboxlist: []
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0,
								score_index:-1,
                checkboxlist: []
							  }, {
								satisfy: null,
								description: '',
								locked: false,
								score: 0,
								checkboxlist:[]
							  },
                {
                satisfy: null,
                description: '',
                locked: false,
                score: 0,
                score_index:-1,
                checkboxlist: []
                },
                {
                satisfy: null,
                description: '',
                locked: false,
                score: 0,
                score_index:-1,
                checkboxlist: []
                }]
			}
		},
		beforeDestroy() {
			let score_array = [1,3,1,3]
			this.score[1].score = score_array[this.score[1].score_index]
			let score_list = [2,2]
      this.score[2].score = 0
			this.score[2].checkboxlist.forEach((value)=>{
				this.score[2].score += score_list[value]
			})
			this.$store.dispatch("project/updateScore", {
				score: this.score,
				phase: "usage",
				aspect: "_4_2_4"
			});
		},
		methods: {
			// 计算分数的时候，第一项可能要先获取项目资料

			handleLock(index) {
				this.score[index].locked = !this.score[index].locked;
			},
			addScore(index, whether) {
				if (whether) {
          if(index==3||index==4){
            this.score[index].score = 0;
          }
          else {
            this.score[index].score = this.items[index].max_score;
          }
				} else {
          if(index==3||index==4){
            this.score[index].score = -5;
          }
          else {
            this.score[index].score = 0;
          }
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.app-container {
		h2 {
			text-align: center;
		}

		#choose {
			text-align: center;
			margin: 20px auto;
		}

		.evaluation-item {
			width: 60%;
			margin: 10px auto;

			>>>.el-card__header {
				padding: 10px 20px;
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both;
			}

			.clearfix {
				overflow: hidden;
				position: relative;

				.number {
					font-weight: bold;
					position: absolute;
					bottom: 0;
				}

				.options {
					float: right;
					bottom: 0;

					.lock,
					.evaluation {
						display: inline-block;
					}
				}
			}

			.children-question {
				width: 100%;
				border: none;

				>>>.el-card__header {
					border-bottom: 0px;
					padding: 0px 20px;
				}

				>>>.el-card__body {
					padding: 10px 20px;
				}
			}
		}
	}
</style>
